// 方法类
// rem 64
.rem64(@type, @value) {
	@{type}: @value / 64rem;
}
.fontSize(@size: 12, @lineHeight: 1) {
	.rem64(font-size, @size);
	.rem64(line-height, @lineHeight);
}
// 工具类
.global-utils() {
	// flex布局
	.u-f1 {
		flex: 1;
	}
	.u-fx {
		display: flex;
	}

	.u-fx-col {
		&:extend(.u-fx);
		flex-direction: column;
		// flex col 垂直居中
		&.vc {
			&:extend(.hc);
		}
		// flex col 水平居中
		&.hc {
			&:extend(.vc);
		}
		// 居中
		&.fc {
			&:extend(.vc);
			&:extend(.hc);
		}
		&.vj {
			&:extend(.hj);
		}
	}

	.vc {
		align-items: center;
	}
	.hc {
		justify-content: center;
	}
	.hj {
		justify-content: space-between;
	}
	.u-fc {
		&:extend(.u-fx);
		&:extend(.vc);
		&:extend(.hc);
	}

	// 文本对齐
	.u-tc {
		text-align: center;
	}
	.u-tr {
		text-align: right;
	}
	.u-ellips {
		.ellipsis();
	}
	// 宽高
	.h100 {
		height: 100%;
	}
	.w100 {
		width: 100%;
	}

	// 交互效果
	// 按钮按下背景变暗
	[act~="btn_d"]:active {
		filter: brightness(.9);
	}
	[act~="btn_l"]:active {
		filter: brightness(1.1);
	}
	// 元素按下背景变暗
	[act~="bg"]:active {
		background-color: #efefef;
	}

	// 网格布局
	.u-clr {
		.clearfix();
	}
	.u-fl {
		float: left;
	}
	.u-fr {
		float: right;
	}
	.u-grid {
		.clearfix();
	}
	.u-col {
		&:extend(.u-fl);
		box-sizing: border-box;
		&.col-6 {
			width: 50%;
		}
		&.col-4 {
			width: 33.3333%;
		}
	}
}